<template>
    <view class="maintenance-container">
        <view class="page-header">
            <text class="page-title">设备维修</text>
            <text class="page-subtitle">共 {{ maintenanceRecords.length }} 条维修记录</text>
        </view>

        <!-- 维修记录列表 -->
        <view class="record-list">
            <view class="record-card" v-for="record in maintenanceRecords" :key="record.id" @click="showDetail(record)">
                
                <!-- 状态指示条 -->
                <view class="status-indicator" v-if="record.status === 0">
                    <text class="status-text">已完成</text>
                </view>
                <view class="status-indicator" v-else-if="record.status === 1">
                    <text class="status-text">待处理</text>
                </view>
                <view class="status-indicator" v-else-if="record.status === 2">
                    <text class="status-text">已取消</text>
                </view>

                <view class="card-content">
                    <view class="card-header">
                        <text class="equipment-name">{{ record.equipmentName }}</text>
                        <view class="status-tag">
                            {{ getStatusText(record.status) }}
                        </view>
                    </view>

                    <view class="info-grid">
                        <view class="info-item">
                            <text class="info-icon">📅</text>
                            <text class="info-text">{{ record.maintenanceDate ? formatDate(record.maintenanceDate) : '未安排' }}</text>
                        </view>
                        <view class="info-item">
                            <text class="info-icon">👤</text>
                            <text class="info-text">{{ record.technicianName || '未指派' }}</text>
                        </view>
                        <view class="info-item">
                            <text class="info-icon">⏱</text>
                            <text class="info-text">{{ record.laborHours || 0 }} 小时</text>
                        </view>
                        <view class="info-item">
                            <text class="info-icon">💰</text>
                            <text class="info-text">¥{{ record.cost || 0 }}</text>
                        </view>
                    </view>

                    <view class="description" v-if="record.description">
                        <text class="desc-icon">📝</text>
                        <text class="desc-text">{{ record.description }}</text>
                    </view>
                </view>

                <!-- 动态按钮 -->
                <view class="action-area" v-if="record.status === 1">
                    <button class="report-button" @click.stop="handleReport(record)">填写维修报告</button>
                </view>
            </view>
        </view>

        <!-- 详情弹窗 -->
        <view class="detail-mask" v-if="showDetailModal" @click="hideDetail">
            <view class="detail-modal" @click.stop>
                <view class="modal-header">
                    <text class="modal-title">{{ selectedRecord.equipmentName }}</text>
                    <text class="close-btn" @click="hideDetail">×</text>
                </view>
                <view class="modal-content">
                    <view class="detail-item">
                        <text class="detail-label">维修类型</text>
                        <text class="detail-value">{{ selectedRecord.maintenanceType }}</text>
                    </view>
                    <view class="detail-item">
                        <text class="detail-label">维修状态</text>
                        <text class="status-badge">
                            {{ getStatusText(selectedRecord.status) }}
                        </text>
                    </view>
                    <view class="detail-grid">
                        <view class="grid-item">
                            <text class="grid-label">维修日期</text>
                            <text class="grid-value">{{ formatDate(selectedRecord.maintenanceDate) || '-' }}</text>
                        </view>
                        <view class="grid-item">
                            <text class="grid-label">维修人员</text>
                            <text class="grid-value">{{ selectedRecord.technicianName || '-' }}</text>
                        </view>
                        <view class="grid-item">
                            <text class="grid-label">总工时</text>
                            <text class="grid-value">{{ selectedRecord.laborHours || 0 }} 小时</text>
                        </view>
                        <view class="grid-item">
                            <text class="grid-label">总费用</text>
                            <text class="grid-value">¥{{ selectedRecord.cost || 0 }}</text>
                        </view>
                    </view>
                    <view class="parts-section" v-if="selectedRecord.partsReplaced">
                        <text class="section-title">🛠 更换部件</text>
                        <text class="parts-list">{{ selectedRecord.partsReplaced }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            maintenanceRecords: [],
            showDetailModal: false,
            selectedRecord: {}
        };
    },
    onLoad() {
        this.fetchMaintenanceRecords();
    },
    methods: {
        fetchMaintenanceRecords() {
            try {
                const userIdInfo = uni.getStorageSync('userIdInfo');
                const userId = userIdInfo ? userIdInfo.userId : null;
                if (!userId) {
                    uni.showToast({
                        title: '未获取到用户 ID',
                        icon: 'none'
                    });
                    return;
                }
                uni.request({
                    url: 'http://localhost:1000/mesEquipment/findRepairLogList',
                    method: 'GET',
                    data: {
                        userId: userId,
                        maintenanceType: '突发性'
                    },
                    success: (res) => {
                        if (res.statusCode === 200 && res.data.code === 200) {
                            this.maintenanceRecords = res.data.data;
                        } else {
                            uni.showToast({
                                title: '获取维修记录失败',
                                icon: 'none'
                            });
                        }
                    },
                    fail: (err) => {
                        console.error('请求失败', err);
                        uni.showToast({
                            title: '网络请求失败',
                            icon: 'none'
                        });
                    }
                });
            } catch (e) {
                console.error('获取用户 ID 失败:', e);
                uni.showToast({
                    title: '获取用户 ID 失败',
                    icon: 'none'
                });
            }
        },

        formatDate(dateString) {
            if (!dateString) return '';
            const date = new Date(dateString);
            return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
        },

        showDetail(record) {
            this.selectedRecord = record;
            this.showDetailModal = true;
        },

        hideDetail() {
            this.showDetailModal = false;
        },

        getStatusText(status) {
            switch (status) {
                case 0:
                    return '已完成';
                case 1:
                    return '待处理';
                case 2:
                    return '已取消';
                default:
                    return '未知状态';
            }
        },

        handleReport(record) {
            uni.navigateTo({
                url: `/pages/equipment/maintain-report/maintain-report?id=${record.id}`
            });
        }
    }
};
</script>

<style scoped>
.action-area {
    padding: 20rpx;
    border-top: 1rpx solid #eee;
    margin-top: 20rpx;
}

.report-button {
    background: #4080ff;
    color: #fff;
    font-size: 28rpx;
    border-radius: 8rpx;
    padding: 16rpx 0;
}

/* 基础样式 */
.maintenance-container {
    padding: 20rpx;
    background: #f8f9fb;
    min-height: 100vh;
}

.page-header {
    padding: 30rpx 20rpx;
    border-bottom: 1rpx solid #eee;
    margin-bottom: 30rpx;
}

.page-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #1a1d28;
    display: block;
}

.page-subtitle {
    font-size: 26rpx;
    color: #888;
    margin-top: 10rpx;
}

/* 卡片样式 */
.record-list {
    display: grid;
    gap: 25rpx;
}

.record-card {
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
    position: relative;
}

.status-indicator {
    height: 8rpx;
    background: #ddd;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 24px;
}

.status-text {
    color: #fff;
    font-size: 24rpx;
}

.card-content {
    padding: 25rpx;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;
}

.equipment-name {
    font-size: 32rpx;
    font-weight: 500;
    color: #1a1d28;
    max-width: 70%;
}

.status-tag {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
}

/* 信息网格 */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    margin-bottom: 20rpx;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.info-icon {
    font-size: 32rpx;
}

.info-text {
    font-size: 26rpx;
    color: #666;
}

/* 描述区域 */
.description {
    background: #f8f9fb;
    border-radius: 8rpx;
    padding: 15rpx;
    display: flex;
    gap: 10rpx;
}

.desc-icon {
    font-size: 28rpx;
}

.desc-text {
    font-size: 26rpx;
    color: #666;
    flex: 1;
}

/* 详情弹窗 */
.detail-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.detail-modal {
    background: #fff;
    width: 85%;
    max-width: 600rpx;
    border-radius: 20rpx;
    overflow: hidden;
}

.modal-header {
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1a1d28;
    max-width: 80%;
}

.close-btn {
    font-size: 40rpx;
    color: #999;
    padding: 0 20rpx;
}

.modal-content {
    padding: 30rpx;
}

.detail-item {
    margin-bottom: 25rpx;
}

.detail-label {
    font-size: 26rpx;
    color: #888;
    display: block;
    margin-bottom: 8rpx;
}

.detail-value {
    font-size: 28rpx;
    color: #333;
}

/* 状态徽章 */
.status-badge {
    display: inline-block;
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
}

.status-badge.status-completed {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    background: #e8faf4;
    color: #06d6a0;
}

.status-badge.status-pending {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    background: #fff5e1;
    color: #ff9f1c;
}

.status-badge.status-cancelled {
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    background: #feecef;
    color: #ef476f;
}


.grid-item {
    background: #f8f9fb;
    border-radius: 8rpx;
    padding: 20rpx;
}

.parts-section {
    border-top: 1rpx solid #eee;
    padding-top: 25rpx;
}

.section-title {
    font-size: 26rpx;
    color: #1a1d28;
    font-weight: 500;
    display: block;
    margin-bottom: 15rpx;
}

.parts-list {
    font-size: 26rpx;
    color: #666;
    line-height: 1.4;
}
</style>
